<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:rich="http://richfaces.ajax4jsf.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<body>                      
<ui:composition template="layout/template.xhtml">
                
<ui:param name="title" value="#{msg.register_title}"/>     
<ui:define name="body">
    
    <h:form id="login">
    
        <rich:panel styleClass="formPanel">
            <f:facet name="header">Register </f:facet>
    
            <p>Registration information : </p>

            <div class="dialog">
            	<!--  Should be fixed in 2.0.1 GA with s:decorate, see http://jira.jboss.com/jira/browse/JBSEAM-1572 -->
                <h:panelGrid columns="2" rowClasses="prop" columnClasses="name namelargewidth,value" style="width: 100%;">
                         
                    <h:panelGroup>
					        <s:label>
					            Login name :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				        
				    <h:panelGroup id="loginField">
						<s:validateAll>
							<s:decorate>
								<s:span class="#{invalid?'error':''}"> 
							        <h:inputText value="#{register.loginName}" required="true" maxlength="15" id="loginDecoration" requiredMessage="#{messages.register_required}">
							        	<a4j:support event="onblur" reRender="loginField" bypassUpdates="true" ajaxSingle="true"></a4j:support>
							        </h:inputText>								 
								</s:span>
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
       				
       				<h:panelGroup>
					        <s:label>
					           First name :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				    
				    <h:panelGroup id="firstNameField">
						<s:validateAll>
							<s:decorate>
								<h:inputText value="#{register.firstName}" required="true" maxlength="30" requiredMessage="#{messages.register_required}"/>					            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
       				
       				<h:panelGroup>
					        <s:label>
					           Last name :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				    
				    <h:panelGroup id="lastNameField">
						<s:validateAll>
							<s:decorate>
								<h:inputText value="#{register.lastName}" required="true" maxlength="30" requiredMessage="#{messages.register_required}"/>					            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
       				
       				<h:panelGroup>
					        <s:label>
					           Email :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				    
				    <h:panelGroup id="emailField">
						<s:validateAll>
							<s:decorate>
								<h:inputText value="#{register.email}" required="true" maxlength="30" requiredMessage="#{messages.register_required}"/>					            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
       				
       				
       				<h:panelGroup>
					        <s:label>
					           Phone Number :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				    
				    <h:panelGroup>
						<s:validateAll>
							<s:decorate>
								<h:inputText value="#{register.phoneNumber.number}" required="true" maxlength="30" id="phoneNumberValue" requiredMessage="#{messages.register_required}"/>					            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup> 
       				
       				<h:panelGroup>
					        <s:label>
					           Phone country :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				    
				    <h:panelGroup id="phoneCountryField">
						<s:validateAll>
							<s:decorate>
							<h:selectOneMenu value="#{register.phoneNumber.phoneCountry}" required="true" requiredMessage="#{messages.register_required}">
							   <s:enumItem enumValue="FRANCE" label="France"/>
							   <s:convertEnum />
							</h:selectOneMenu>			            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>  
       				
       				<h:panelGroup>
					        <s:label>
					           Date of birth :
					        </s:label>
				    </h:panelGroup>
				    
				   <h:panelGroup id="dateOfBirthField">
						<s:validateAll>
							<s:decorate>
									<a4j:outputPanel id="calendar" layout="block">
					                    <rich:calendar value="#{register.dateOfBirth}"
					                        popup="true"
						                    locale="#{localeSelector.locale}"
						                    datePattern="dd/MM/yyyy"
						                    showApplyButton="false"
						                    isDayEnabled="true"/>
					                     <s:message styleClass="error errors"/>
				            		</a4j:outputPanel>								 					            
								
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
					

       				<h:panelGroup>
					        <s:label for="password">
					          Password :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>

				    <h:panelGroup id="passwordField">
						<s:validateAll>
							<s:decorate>
								 <h:inputSecret value="#{register.password}" id="password" required="true" requiredMessage="#{messages.register_required}"/>					            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup> 
       								    					
					
       				<h:panelGroup>
					        <s:label for="confirm">
					          Password confirmation :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>

				    <h:panelGroup id="confirmField">
						<s:validateAll>
							<s:decorate>
								 <h:inputSecret value="#{register.confirm}" id="confirm" required="true" validatorMessage="#{messages.register_password_dontmatch}">
								 	<s:validateEquality for=":#{rich:clientId('password')}" />
								 </h:inputSecret>					            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
					
					<h:graphicImage value="/img/clear.gif"/>
					<h:panelGroup>
						<h:graphicImage value="/seam/resource/captcha" style="border: 1px solid black;padding: 0px;margin: 0px;"/>
				    </h:panelGroup>					
       				
       				<h:panelGroup>
					        <s:label for="verifyCaptcha">
					          Enter the result here of the image's operation :
					            <s:span styleClass="required" rendered="true">*</s:span>
					        </s:label>
				    </h:panelGroup>
				    
				    <h:panelGroup id="captchaField">
						<s:validateAll>
							<s:decorate>
								<h:inputText id="verifyCaptcha" value="#{captcha.response}" required="true" requiredMessage="#{messages.register_required}"/>			            
								<s:message styleClass="error errors"/>
							</s:decorate>
						</s:validateAll>
       				</h:panelGroup>
       				
       				<h:graphicImage value="/img/clear.gif" style="border: none;"/>
       				<h:panelGroup>
	       				<div class="actionButtons">
	           				<h:commandButton value="Register" action="#{register.register}"/>
	           			</div>
       				</h:panelGroup>

                                
                </h:panelGrid>
            </div>
                
        </rich:panel>
            

        
          
    </h:form>

 </ui:define> 
</ui:composition>

</body>

</html>
